<template>
    <div :class="['co-cashier-item','box-row', goods.store_num==0? 'co-cashier-item-disabled':'']" :style="styleObject">
        <div class="cashier-img-box">
            <img v-if="goods.img" :src="imgUrl + goods.img" class="image">
            <el-icon v-else size="70" color="#dcdfe6"><Failed /></el-icon>
        </div>
        <div class="cashier-text-box">
            <p class="name">{{ goods.name }}</p>
            <p>售价：{{ goods.sale_price }}元</p>
            <!--<p>简介：{{ goods.spec }}</p>-->
            <p>商品数目：{{ goods.store_num }}</p>
        </div>
    </div>
</template>
<script>

import { reactive,toRefs,computed } from 'vue';
import { Failed } from '@element-plus/icons-vue';
import { imgUrl } from '../../uiframe/services/socket';
export default {
    components:{
        Failed
    },
    props:{
        goods:{type:Object},
        width:Number
    },
    setup:(props)=>{
        let r = parseFloat(getComputedStyle(document.documentElement).fontSize);
        const data = reactive({
            styleObject:{
                width:computed(()=>{
                    let num = parseInt(props.width / 252);
                    let w = ( props.width / (num > 0 ? num : 1) - ( r * 1.8 ) - ( r * .5 ) - 2 );
                    return w > 210 ? w + "px" : "252px"
                })
            }
        }),
        methods = {

        }

        return {
            ...toRefs(data),
            ...methods,
            imgUrl
        }
    }
}
</script>
<style lang="scss">
.co-cashier-item{
    border:1px solid var(--el-border-color);
    height:7.5rem;
    margin: .5rem .5rem 0 0;
    border-radius: .25rem;
    padding: 0 .9rem;
    color: #272828;
    cursor: pointer;
    font-size: 14px;
    .cashier-img-box{
        display: flex;
        align-items: center;
        padding-right: .9rem;
        .image{
            width: 70px;
            height: 70px;
            border-radius: .25rem;
        }
    }
    .cashier-text-box{
        flex:1;
        width: 68%;
        p{
            overflow: hidden;
            text-overflow:ellipsis;
            white-space: nowrap;
        }
        .name{
            font-weight: 600;
        }
    }
}
.co-cashier-item-disabled{
    background-color: #f5f7fa;
    cursor: not-allowed;
}
</style>